<script lang="ts" setup name="home">
import { useRouter } from 'vue-router'
import UserCard from '@/components/UserCard.vue'
import InfoCard from '@/components/InfoCard.vue'
// 这里只做静态页面，无实际逻辑
const router = useRouter()
const goLogin = () => {
  router.push('/login')
}
const goPerfectInfo = () => {
  router.push('/basic-info')
}
const goAssessment = () => {
  router.push('/assessment')
}
const goBasicInfo = () => {
  router.push('/basic-info')
}
</script>

<template>
  <div class="home-page">
    <!-- 顶部状态栏 -->
    <!-- <div class="top-bar">
      <span class="weather">晴天 35°</span>
      <span class="icon refresh" />
      <span class="icon headphone" />
      <span class="icon message" />
      <span class="icon more" />
      <span class="icon scan" />
    </div> -->
    <!-- 用户信息卡片 -->
    <UserCard
      avatar="@/assets/images/user.png"
      weatherIcon="☀️"
      temperature="25°"
      weatherDesc="晴天"
      :onLogin="goLogin"
    />
    <!-- 完善信息卡片 -->
    <InfoCard
      desc="为了方便您的计划制定，请尽快完成基础评估和病历上传"
      :onClick="goPerfectInfo"
    />
    <!-- 轮播广告 -->
    <div class="banner">
      <van-swipe class="banner-swipe" :autoplay="3000" indicator-color="#409eff">
        <van-swipe-item>
          <img class="banner-img" src="@/assets/images/home.jpg" />
        </van-swipe-item>
        <van-swipe-item>
          <img class="banner-img" src="@/assets/images/home1.jpg" />
        </van-swipe-item>
      </van-swipe>
      <!-- <div class="banner-text">轻松掌握 你的医疗管家</div> -->
    </div>
    <!-- 四宫格功能区 -->
    <div class="function-grid">
      <div class="grid-item train">
        <span class="iconfont icon-huoche"></span>
        <span>康复训练</span>
      </div>
      <div class="grid-item diary">
        <span class="iconfont icon-fenlei"></span>
        <span>膀胱日记</span>
      </div>
      <div class="grid-item care">
        <span class="iconfont icon-user"></span>
        <span>失禁照护</span>
      </div>
      <div class="grid-item tool" @click="goAssessment">
        <span class="iconfont icon-qianbao1"></span>
        <span>评估工具</span>
      </div>
    </div>
    <!-- 今日任务卡片 -->
    <div class="task-card">
      <div class="task-title">📌 今日任务 <span class="all-task">全部任务</span></div>
      <div class="task-list">
        <div class="task-item">
          <div class="task-icon">💊</div>
          <div class="task-content">
            <div class="task-name">按时服用降压药</div>
            <div class="task-time">09:00</div>
          </div>
          <div class="task-status completed">已完成</div>
        </div>
        <div class="task-item">
          <div class="task-icon">📊</div>
          <div class="task-content">
            <div class="task-name">测量血压并记录</div>
            <div class="task-time">12:00</div>
          </div>
          <div class="task-status pending">待完成</div>
        </div>
        <div class="task-item">
          <div class="task-icon">🚶</div>
          <div class="task-content">
            <div class="task-name">进行30分钟康复训练</div>
            <div class="task-time">15:30</div>
          </div>
          <div class="task-status pending">待完成</div>
        </div>
        <div class="task-item">
          <div class="task-icon">💧</div>
          <div class="task-content">
            <div class="task-name">记录今日饮水量</div>
            <div class="task-time">18:00</div>
          </div>
          <div class="task-status pending">待完成</div>
        </div>
        <div class="task-item">
          <div class="task-icon">🩺</div>
          <div class="task-content">
            <div class="task-name">预约下周复诊</div>
            <div class="task-time">20:00</div>
          </div>
          <div class="task-status pending">待完成</div>
        </div>
        <div class="task-item">
          <div class="task-icon">💊</div>
          <div class="task-content">
            <div class="task-name">服用维生素D补充剂</div>
            <div class="task-time">08:30</div>
          </div>
          <div class="task-status completed">已完成</div>
        </div>
        <div class="task-item">
          <div class="task-icon">📱</div>
          <div class="task-content">
            <div class="task-name">更新健康数据到APP</div>
            <div class="task-time">14:00</div>
          </div>
          <div class="task-status pending">待完成</div>
        </div>
        <div class="task-item">
          <div class="task-icon">🧘</div>
          <div class="task-content">
            <div class="task-name">进行15分钟冥想放松</div>
            <div class="task-time">16:30</div>
          </div>
          <div class="task-status pending">待完成</div>
        </div>
        <div class="task-item">
          <div class="task-icon">🍎</div>
          <div class="task-content">
            <div class="task-name">记录今日饮食情况</div>
            <div class="task-time">19:30</div>
          </div>
          <div class="task-status pending">待完成</div>
        </div>
        <div class="task-item">
          <div class="task-icon">😴</div>
          <div class="task-content">
            <div class="task-name">准备睡前放松，保证睡眠质量</div>
            <div class="task-time">22:00</div>
          </div>
          <div class="task-status pending">待完成</div>
        </div>
      </div>
    </div>
    <button class="basic-info-btn" @click="goBasicInfo">基本信息</button>
  </div>
</template>

<style scoped lang="scss">
.home-page {
  background: #ffffff;
  min-height: 95vh;
  padding-bottom: 16px;
}
.top-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 16px 0 16px;
  font-size: 19px;
  .weather { flex: 1; color: #333; }
  .icon { margin-left: 18px; width: 26px; height: 26px; background: #eee; border-radius: 50%; display: inline-block; }
}
.user-card, .banner, .function-grid .grid-item, .task-card {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 24px 0 rgba(180, 200, 230, 0.13);
  backdrop-filter: blur(2px);
}
.user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  margin: 32px 16px 24px 16px;
  padding: 32px;
  border-radius: 13px;
  border: 2px solid #e8f2ff;
  box-shadow: 0 4px 20px rgba(64, 158, 255, 0.1);
  font-size: 29px;
  .user-info {
    display: flex;
    align-items: center;
    .avatar {
      width: 92px;
      height: 92px;
      border-radius: 50%;
      margin-right: 36px;
    }
    .login-btn {
      background: #409eff;
      color: #fff;
      border: none;
      border-radius: 28px;
      padding: 16px 48px;
      font-size: 27px;
      cursor: pointer;
    }
  }
  .weather-info {
    display: flex;
    align-items: center;
    .weather-icon {
      font-size: 46px;
      margin-right: 18px;
    }
    .weather-details {
      text-align: left;
      .temperature {
        font-size: 30px;
        font-weight: bold;
        color: #333;
        line-height: 1;
      }
      .weather-desc {
        font-size: 19px;
        color: #666;
        margin-top: 6px;
      }
    }
  }
}
.banner {
  background: #fff;
  margin: 0 16px 24px 16px;
  border-radius: 13px;
  border: 2px solid #e8f2ff;
  box-shadow: 0 4px 20px rgba(64, 158, 255, 0.1);
  overflow: hidden;
  text-align: center;
  .banner-img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
  }
  .banner-text {
    font-size: 28px;
    color: #333;
    margin: 22px 0;
  }
}
.banner-swipe {
  border-radius: 13px;
  overflow: hidden;
}
.function-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 0 16px 36px 16px;
  .grid-item {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #f8fdff 0%, #fef9fb 50%, #fffef9 100%);
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(64, 158, 255, 0.1);
    padding: 20px 24px 20px 16px;
    transition: box-shadow 0.2s, transform 0.2s;
    border: 2px solid #e8f2ff;
    cursor: pointer;
    &:hover {
      box-shadow: 0 8px 32px rgba(64, 158, 255, 0.18);
      transform: translateY(-2px) scale(1.04);
    }
    .iconfont {
      font-size: 44px;
      margin-right: 20px;
      border-radius: 9px;
      padding: 10px;
      color: #5b8def;
    }
    span:last-child {
      font-size: 28px;
      color: #222;
      font-weight: 600;
      letter-spacing: 1px;
    }
    &.train .iconfont { color: #b07cff; }
    &.diary .iconfont { color: #3ec6ff;  }
    &.care .iconfont { color: #ff8a65;  }
    &.tool .iconfont { color: #4fc3a1;  }
  }
}


.task-card {
  background: linear-gradient(135deg, #f8fdff 0%, #fef9fb 50%, #fffef9 100%);
  margin: 0 16px 36px 16px;
  border-radius: 13px;
  padding: 40px;
  min-height: 700px;
  border: 2px solid #e8f2ff;
  box-shadow: 0 6px 28px rgba(64, 158, 255, 0.13);
  .task-title {
    font-size: 34px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 36px;
    .all-task {
      font-size: 28px;
      color: #409eff;
      cursor: pointer;
    }
  }
  .task-list {
    max-height: 540px;
    overflow-y: auto;
    padding-right: 14px;
    &::-webkit-scrollbar {
      width: 10px;
    }
    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 5px;
    }
    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 5px;
      &:hover {
        background: #a8a8a8;
      }
    }
    .task-item {
      display: flex;
      align-items: center;
      padding: 26px 0;
      border-bottom: 1px solid #f0f0f0;
      &:last-child {
        border-bottom: none;
      }
      .task-icon {
        font-size: 44px;
        margin-right: 32px;
        width: 64px;
        text-align: center;
      }
      .task-content {
        flex: 1;
        .task-name {
          font-size: 26px;
          color: #333;
          font-weight: 600;
          margin-bottom: 10px;
        }
        .task-time {
          font-size: 20px;
          color: #999;
        }
      }
      .task-status {
        font-size: 22px;
        padding: 12px 28px;
        border-radius: 18px;
        font-weight: 600;
        &.completed {
          background: #e8f5e8;
          color: #52c41a;
        }
        &.pending {
          background: #fff7e6;
          color: #fa8c16;
        }
      }
    }
  }
}
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  background: #fff;
  display: flex;
  border-top: 2px solid #eee;
  .nav-item {
    flex: 1;
    text-align: center;
    padding: 22px 0 0 0;
    font-size: 28px;
    color: #888;
    .icon { display: block; margin: 0 auto 10px auto; width: 52px; height: 52px; background: #e6f0fa; border-radius: 50%; }
    &.active { color: #409eff; }
  }
}
.info-card {
  margin: 0 16px 24px 16px;
  padding: 28px;
  box-sizing: border-box;
  background: #f4faff;
  border-radius: 18px;
  box-shadow: 0 2px 12px 0 rgba(120, 160, 220, 0.08);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  min-height: 90px;
  .info-card-main {
    display: flex;
    align-items: center;
    font-size: 0;
    margin-bottom: 12px;
    width: 100%;
    .info-card-icon {
      font-size: 54px;
      margin-right: 22px;
      vertical-align: middle;
      line-height: 1;
      margin-top: -8px;
    }
    .info-card-title {
      font-size: 32px;
      font-weight: 900;
      color: #111;
      letter-spacing: 4px;
      line-height: 1.2;
      b {
        font-weight: 900;
      }
      .info-card-link {
        color: #2979ff;
        font-size: 36px;
        font-weight: 900;
        margin: 0 6px;
        letter-spacing: 2px;
      }
    }
  }
  .info-card-desc {
    font-size: 17px;
    color: #4a5a6a;
    background: #eaf3ff;
    border-radius: 16px;
    padding: 9px 22px;
    margin-left: 72px;
    margin-top: 0;
    display: inline-block;
    font-weight: 400;
    letter-spacing: 1px;
  }
}
.basic-info-btn {
  width: 90%;
  margin: 18px auto 0 auto;
  display: block;
  padding: 14px 0;
  background: linear-gradient(90deg, #ede7ff 0%, #fff 100%);
  color: #7b6ff2;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(80,80,200,0.08);
  cursor: pointer;
}
</style>
